<template>
	<view>
		<billPicker ref="refBillPicker" title="调拨单" @confirm="onConfirmBill" :rangeSource="{ apiMethod: 'dbmasterpage', params: {} }"></billPicker>

		<view class="cu-form-group">
			<view class="title">调拨出仓库</view>
			<input placeholder="" :disabled="true" :value="billInfo && billInfo.wh_id_name" name="input" />
		</view>
		<view class="cu-form-group ">
			<view class="title">调拨入仓库</view>
			<input placeholder="" :disabled="true" :value="billInfo && billInfo.new_wh_name" name="input" />
		</view>

		<view class="cu-form-group ">
			<view class="title">储位</view>
			<input placeholder="" :disabled="true" v-model="store" name="input" />
		</view>
		<!-- <view class="cu-form-group margin-top">
			<view class="title">输入</view>
			<input placeholder="输入扫码信息"  v-model="todoNum" @confirm="onConfirmTodo" name="input" />
		</view> -->

		<todo-input v-model="todoNum" @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text>
				清单列表
			</view>
		</view>
		<!-- todolist -->
		<todo-list-view :top="660" class="cu-list menu">
			<view v-for="(item, idx) in todoList" class="cu-item">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-formfill text-blue margin-right-xs"></text>
						<text>发料单:</text>
						{{ item.bill_id }}
					</view>
					<view class="text-gray text-sm">
						<text class="lg text-gray cuIcon-settingsfill"></text>
						<text>料号:</text>
						{{ item.part_id }}
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">
						<text class="text-gray">可发({{ item.remain_qty }})</text>
						<text class="text-gray">需求({{ item.plan_qty }})</text>
					</view>
					<view class="text-gray  text-xs">
						<text class="text-gray">本次({{ item.current_qty }})</text>
						<text class="text-gray">超发({{ item.over_qty }})</text>
					</view>
				</view>
			</view>
		</todo-list-view>

		<view class="cu-bar tabbar bg-white shadow foot foot-btn-group">
			<button class="cu-btn bg-white" @tap="onCancelDB">取消调拨</button>
			<button class="cu-btn bg-white" @tap="onCloseDB">调拨完成</button>
			<button class="cu-btn bg-white" @tap="onChangeStore">切换储位</button>
		</view>

		<bill-prompt ref="refCancelPrompt" @confirm="onCancelConfirm" title="取消调拨"></bill-prompt>

	</view>
</template>

<script>
	import billPicker from './bill-picker.vue';
	import billPrompt from './bill-prompt.vue'
	import todoInput from './todo-input';
	import todoListView from './todo-list-view.vue'
	import util from '@/serveices/util.js'
	import api from '@/serveices/wms-api.js';
	export default {
		components: {
			billPicker,
			todoInput,
			billPrompt,
			todoListView
		},
		data() {
			return {
				billInfo: null,
				store: '',
				todoNum: '',
				todoFocus: true,
				todoList: []
			};
		},
		methods: {
			onTodoFocusChange(focus) {
				this.todoFocus = focus
			},
			onConfirmBill({ bill },isPlayVoice) {
				return api
					.dbmasterpage({
						keyWords: bill || '',
						page: 1,
						rows: 2
					})
					.then(res => {
						if (res.data && res.data.length == 1) {
							//
							// 使用单据选择界面的bill_id填充调拨单文本框，

							this.$refs.refBillPicker.setValue(res.data[0].bill_id);
							this.$refs.refBillPicker.lock()
							// 使用wh_id_name字段显示调拨出仓库，
							// 使用new_wh_name字段显示调拨入仓库
							this.billInfo = res.data[0];
							// 显示明细
							this.buildDetail()
							if(isPlayVoice) util.playSuccess()
						} else {
							this.billInfo = null;
							this.$refs.refBillPicker.unlock()
							if(isPlayVoice) util.playFailed()
						}
						this.todoFocus = true
						this.todoNum = ''
					})
					.catch(err => {
						this.billInfo = null;
						this.todoFocus = true
						this.todoNum = ''
						if(isPlayVoice) util.playFailed()
					})
			},
			buildDetail() {
				return api.dbdetail(this.billInfo.bill_id).then(res => {
					this.todoList = res.data;
				});
			},
			onConfirmTodo() {
				if (!this.billInfo) {
					//this.$refs.refBillPicker.setValueAndTriggerEnter()
					// 3.1.	若调拨单文本框为空，此时扫描内容作为调拨单处理
					this.onConfirmBill({ bill: this.todoNum },true)
				} else if (!this.store) {
					//3.2.	若调拨单文本框不为空，储位文本框为空，输入内容当作储位处理
					api.checkbin(this.todoNum).then(res => {
						if (res.wh_id !== this.billInfo.new_wh) {
							//储位与调拨入仓码不符
							uni.showToast({
								title: '储位与调拨入仓码不符',
								icon: 'none',
								duration: 2000
							});
							util.playFailed()
						} else {
							this.store = res.data.bin_id;
							util.playSuccess()
						}

					}).catch(() => {
						util.playFailed()
					}).finally(()=>{
						this.todoNum = ''
					})
				} else {
					//3.3.	若调拨单号和储位文本框均不为空，扫描内容作为物料信息处理
					api.allocation({
						opType: 'ALLOCATION',
						billNo: this.billInfo.bill_id,
						binId: this.store,
						scanInfo: this.todoNum
					}).then(res => {
						this.todoList = res.data
					})
				}
			},
			onCancelDB() {
				this.$refs.refCancelPrompt.show()
			},
			onCancelConfirm(scanInfo) {
				api.allocation({
					opType: 'CANCEL',
					binId: '',
					billNo: '',
					scanInfo: scanInfo
				}).then(res => {
					//刷新单据
					if (this.billInfo) {
						this.buildDetail()
					}
					util.playSuccess()
					this.$refs.refCancelPrompt.hide()
				}).catch(err=>{
					util.playFailed()
				}).finally(()=>{
					this.todoFocus = true
				})
			},
			onCloseDB() {
				//需检查下方表格中是否存在扫描数量与需求数量不相等的情况，若有，提示还有物料未扫满，若均相等
				if (this.todoList.length) {
					const isFinish = this.todoList.filter(x => x.act_qty != x.plan_qty).length == 0
					if (!isFinish) {
						uni.showToast({
							title: "还有物料未扫满",
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showModal({
							title: '系统提示',
							content: '是否确认调拨完成？',
							success: (res) => {
								api.allocation({
									opType: 'CLOSED',
									binId: this.store,
									billNo: this.billInfo.bill_id,
									scanInfo: this.todoNum
								}).then(res => {
									this.clearForm()
								})
							},
						})

					}
				}
			}

			,
			onChangeStore() {
				this.store = ''
				this.todoNum = ''
				this.todoFocus = true
			},
			clearForm() {
				this.billInfo = null
				this.todoNum = ''
				this.store = ''
				this.todoList = []
				this.todoFocus = true
			}
		}
	};
</script>

<style></style>
